<template>
  <div class="emailLogin">
    <div class="inputArea">
      <el-form
        :model="loginForm"
        ref="loginForm"
        label-position="left"
        label-width="0px"
        class="login-container"
      >
        <el-form-item prop="email">
          <el-input
            type="text"
            v-model="loginForm.email"
            autocomplete="off"
            placeholder="请输入邮箱号"
            @input="emailInputChange"
          ></el-input>
          <span v-show="isRight === 0" style="color: #f70404">{{
            message
          }}</span>
          <span v-show="isRight === 1" style="color: #22b865">{{
            message
          }}</span>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            style="width: 200px"
            prop="code"
            class="yanzheng"
            type="text"
            v-model="loginForm.code"
            autocomplete="off"
            placeholder="请输入验证码"
            @input="codeInputChange"
            maxlength="6"
          ></el-input>
          <button
            @click.prevent="getEmailCode()"
            class="code-btn getYZ"
            :disabled="!show"
          >
            <span v-show="show">立即获取</span>
            <span v-show="!show" class="count">{{ count }} s后重发</span>
          </button>
          <span v-show="codeIsRight === 0" style="color: #f70404">{{
            codeMsg
          }}</span>
          <span v-show="codeIsRight === 1" style="color: #22b865">{{
            codeMsg
          }}</span>
        </el-form-item>
      </el-form>
    </div>
    <el-button
      style="background-color: rgba(255, 101, 0)"
      class="loginBtn"
      @click="login()"
      >登录</el-button
    >
    <div class="loginFooter">
      <div class="others">
        <router-link class="forget" to="/resetPassword">忘记密码</router-link>
        <router-link class="register" to="/register">注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
const TIME_COUNT = 60; // 设置一个全局的倒计时的时间
import qs from "qs";
import throttling from "@/public/throttling.js";
export default {
  name: "emailLogin",
  data() {
    return {
      isRight: 0,
      message: "",
      codeIsRight: 0,
      codeMsg: "",
      // 显示立即获取 或 倒计时
      show: true,
      // 倒计时数
      count: "",
      // 实时倒计时数
      timer: null,
      loginForm: {
        email: "",
        code: "",
      },
    };
  },
  methods: {
    // 有效性验证
    emailInputChange(email) {
      let reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
      // console.log(password);
      if (email.length === 0) {
        this.isRight = 0;
        this.message = "邮箱不可为空!";
      } else if (!reg.test(email)) {
        this.isRight = 0;
        this.message = "邮箱格式错误！";
      } else {
        this.isRight = 1;
        this.message = "输入格式正确!";
      }
    },
    codeInputChange(code) {
      let reg = /^[0-9]{6}$/; /*定义验证表达式*/
      // console.log(password);
      if (code.length === 0) {
        this.codeIsRight = 0;
        this.codeMsg = "验证码不可为空!";
      } else if (code.length !== 6) {
        this.codeIsRight = 0;
        this.codeMsg = "验证码必须为6位！";
      } else if (!reg.test(code)) {
        this.codeIsRight = 0;
        this.codeMsg = "验证码只能为数字, 格式错误！";
      } else {
        this.codeIsRight = 1;
        this.codeMsg = "输入格式正确!";
      }
    },
    // 登录
    login: throttling(function () {
      var _this = this;
      this.$axios
        .get(
          "/emailLogin/" + this.loginForm.email + "/" + this.loginForm.code,
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
          console.log(res);
          if (res.data.code === 201) {
            this.$message({
              message: "管理员登录成功",
              type: "success",
            });
            console.log(res);
            window.sessionStorage.setItem("identify", res.data.code);
            // 本地存储用户 保持登录状态
            _this.$store.commit("managerLogin", res.data.data);
            //全局存储token
            window.sessionStorage.setItem("tokenvalue", res.data.token);

            this.$router.replace({ path: "/" });
          } else if (res.data.code === 200) {
            this.$message({
              message: "用户登录成功",
              type: "success",
            });
            window.sessionStorage.setItem("identify", res.data.code);
            _this.$store.commit("login", res.data.data);
            window.sessionStorage.setItem("tokenvalue", res.data.token);
            // console.log(222);
            this.$router.replace({ path: "/" });
          } else if (res.data.code === 404) {
            this.$message({
              message: "对不起，你没有管理员权限！",
              type: "error",
            });
          } else if (res.data.code === 401) {
            this.$message.error("密码必须大于等于6位！");
          } else {
            this.$message.error("登录失败，请重试！");
          }
        })
        .catch((failResponse) => {});
      // });
    }, 1000),
    // 获得验证码
    getEmailCode: throttling(function () {
      var reg =
        /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/; /*定义验证表达式*/
      if (this.loginForm.email === "") {
        this.$message.error("请输入邮箱");
        return;
      } else if (!reg.test(this.loginForm.email)) {
        this.$message.error("请注意邮箱格式！");
        return;
      } else {
        this.$axios
          .get("/getCheckCode/" + this.loginForm.email, {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
          .then((res) => {
            console.log(res);
            sessionStorage.setItem("checkcode", res.data.data);
          });
        // 验证码倒计时效果
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    }, 1000),
  },
};
</script>

<style scoped>
.inputArea {
  position: absolute;
  margin-top: 60px;
  width: 700px;
  height: 120px;
  left: 50%;
  margin-left: -147px;
  top: 30px;
}

.inputArea .el-input {
  width: 300px;
  height: 50px;
  border-radius: 5px;
}

.inputArea input:focus {
  border: 2px solid rgba(255, 101, 0);
}

.el-form-item {
  margin-bottom: 20px;
}

.getYZ {
  border: 1px solid rgba(255, 101, 0);
  background-color: rgba(255, 101, 0);
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
}

.loginBtn {
  position: absolute;
  bottom: 50px;
  width: 300px;
  height: 50px;
  background-color: rgba(255, 101, 0);
  color: white;
  font-weight: bold;
  border-radius: 5px;
  left: 50%;
  margin-left: -150px;
}

.loginFooter {
  position: absolute;
  bottom: 0px;
  margin-top: 20px;
  width: 100%;
  height: 30px;
  right: 100px;
}

.loginFooter .auto {
  width: 130px;
  float: left;
}

.loginFooter .auto span {
  margin-left: 5px;
  font-size: 14px;
}

.loginFooter .others {
  width: 120px;
  float: right;
}

.loginFooter .others .forget {
  display: inline-block;
  width: 80px;
  color: #666;
}
</style>
